import React, { useEffect, useState } from 'react'
import axios from '../../api/axios';
import { Button, SearchBar, Space, Toast, Card, Tag, NavBar } from 'antd-mobile'
import { IndexBar, List } from 'antd-mobile'
import useLoash from '../../hooks/useLoash';
import { Swiper, Image } from 'react-vant';
 import styles from './search.module.css'
import { useNavigate, Outlet } from 'react-router-dom'
import { BellOutline, HeartFill } from 'antd-mobile-icons'
function Index(props) {
    const {item,handelsc,collectList,user}=props
    return (
        <div>
            <div className={styles.listitem}>
                <span className={styles.dw1}>音乐会</span>
                <span className={styles.dw2} ><HeartFill
                    onClick={() => handelsc(item)}
                    color={collectList.some((it) => it.id === item.id)
                        ? 'red'
                        : '#ccc'
                    }
                /></span>
                <Image src={item.image} className={styles.dw}></Image>
                <div className={styles.listitem2}>
                    <div className={styles.listitem3}>
                        <p>{item.title}</p>
                        <p style={{ display: 'flex' }}>
                            <Image src={user.avatar} className={styles.img2}></Image>
                            <span>{user.nickname}</span>

                        </p>
                    </div>
                    <div className={styles.listitem4}>
                        <p>￥{item.price}</p>
                    </div>
                </div>
                <div>
                    <p>182 <span>参与者</span></p>
                </div>
            </div>
        </div>
    )
}

export default Index
